<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>修改个人资料</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<script th:src="@{/layui/layui.js}" charset="utf-8"></script>
<link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
<script th:inline="javascript" type="text/javascript">
	layui.use('upload', function(){
	  var $ = layui.jquery
	  ,upload = layui.upload;
	  
	  //普通图片上传
	  var uploadInst = upload.render({
	    elem: '#test1'
	    ,url: '../uploadFile?flag=1'
	    ,size: 2000 //1MB
	    ,before: function(obj){
	      //预读本地文件示例，不支持ie8
	      obj.preview(function(index, file, result){
	       	$('#imageFile').attr('src', result); //图片链接（base64）
	       	$('#imageFile').attr('width', $('#imageFile').width()*2/5+'px;'); //图片链接（base64）
	      });
	    }
	    ,done: function(result){
	      //如果上传失败
	    if(result.code == 0){
	      	$('#imageName').val(result.data["title"]); //图片名称保存到隐藏域
	      	layer.msg('上传成功');
	      	//layer.msg("图片名称："+result.data["title"]); //成功
	        return;
	      }else{
			return layer.msg(res.msg);      
     	 }
	    },
	    success :function(res){
	    	alert(res)
	    }
	    ,error: function(){
	      //演示失败状态，并实现重传
	      var demoText = $('#demoText');
	      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
	      demoText.find('.demo-reload').on('click', function(){
	        uploadInst.upload();
	      });
	    }
  }); });

</script>
</head>
<body>

	<!-- 	<div>
		<label class="layui-bg-red" style="margin-left: 25px;">您正在修改个人资料。。。</label>
	</div> -->
	
	<form class="layui-form" action="" style="margin-top: 15px;">
		<div class="layui-form-item">
			<label class="layui-form-label">用户名：</label>
			<div class="layui-input-block">
				<input type="text" name="userName" lay-verify="required"
					placeholder="用户名" autocomplete="off" class="layui-input"
					id="userName" readonly="readonly">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">昵称：</label>
			<div class="layui-input-block">
				<input type="text" name="nickName" lay-verify="required"
					placeholder="昵称" autocomplete="off" class="layui-input"
					id="nickName">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">个性签名：</label>
			<div class="layui-input-block">
				<input type="text" name="sign" lay-verify="required"
					placeholder="个性签名" autocomplete="off" class="layui-input" id="sign">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">个人头像：</label>
			<div class="layui-upload">
				<button type="button" class="layui-btn" id="test1">上传图片</button>
				<div class="layui-upload-list">
					<img class="layui-upload-img" id="imageFile"
						style="margin-left: 115px" >
					<!--  -->
					<p id="demoText"></p>
					<!-- 这里显示上传的反馈信息 -->
				</div>
			</div>
		</div>
			<div class="layui-form-item">
			<div class="layui-input-block">
				<input type="text" name="imageName"
					 class="layui-hide" id="imageName">
			</div>
		</div>
		<div class="layui-form-item layui-form-text">
			<label class="layui-form-label">个人简介：</label>
			<div class="layui-input-block">
				<textarea class="layui-textarea layui-hide" name="content"
					lay-verify="content" id="LAY_demo_editor"></textarea>
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
				<button data-type="del" class="layui-btn layui-btn-primary">恢复</button>
			</div>
		</div>
	</form>
<script type="text/javascript" th:inline="javascript">
  layui.use(['jquery','layer','form'],function(){  
  	   var form = layui.form
       var $ = layui.jquery;  
       $(document).ready(function(){
	   $.ajax({
			url: "../admin/blogger/getBloggerInfo",
			type: "get" ,
			dataType:'json',
			success:function(result){
			if(typeof result === 'string') {
				 result = JSON.parse(result)
			}
			if(result.success){
				var index = layer.load(2, {time: 5*1000}); //又换了种风格，并且设定最长等待5秒 
				 /* var resultt = eval("(" + result.responseText + ")"); */
                	 /* result = JSON.parse(result.responseText); */
                   $("#userName").val(result.blogger.userName);
                   $("#nickName").val(result.blogger.nickName);
                  //var finalurl ='/uploads/2017/10/'+result.imageName; //这里需要动态获取，根据img前面6个字符
                   $("#imageFile").attr('src','../uploads/'+result.blogger.imageName); //去除年月日了
                   $("#sign").val(result.blogger.sign);
                   $("#LAY_demo_editor").val(result.blogger.profile);
				   layer.close(index);     
			}else{
					layer.msg("加载失败！");
				}
			} //end success
		});//end ajax
						
});		//end $()	
  });  
</script>
<script th:inline="javascript" type="text/javascript">
layui.use(['form', 'layedit', 'laydate', 'jquery', 'layer'],
	function() {
    var form = layui.form,
    layer = layui.layer,
    layedit = layui.layedit,
    laydate = layui.laydate,
    $ = layui.jquery;
    //上传图片,必须放在 创建一个编辑器前面
    layedit.set({
        uploadImage: {
            url: '../uploadFile' //接口url
            ,
            type: 'post' //默认post
        }
    });
	window.onload = function() {  
     var w = $('#imageFile').width()*2/5;//设置最大宽度,也可根据img的外部容器 而动态获得,比如：$("#demo").width();  
      $("img").each(function() {//如果有很多图片,使用each()遍历   
            var img_w = $(this).width();//图片宽度   
            var img_h = $(this).height();//图片高度   
            if (img_w > w) {//如果图片宽度超出指定最大宽度   
                var height = (w * img_h) / img_w; //高度等比缩放   
                $(this).css( {  
                    "width" : w,"height" : height  
                });//设置缩放后的宽度和高度   
            }  
        });  
  
    } 
    //创建一个编辑器  id=LAY_demo_editor
    var editIndex = layedit.build('LAY_demo_editor');
    //自定义验证规则（只要非空即可）
       	form.verify({
		content : function(value) {
			value = $.trim(layedit.getText(editIndex));
			if (value == "")
				return "至少得有一个字吧";
				layedit.sync(editIndex);
			}
		});
    //监听提交
  form.on('submit(demo1)',
   function(data) {
	     //   var userName = data.field["userName"]
	        var nickName = data.field["nickName"]
	        var sign = data.field["sign"]
	      	var imageName = data.field["imageName"]
	      // 	var imageFile = imageName.substring(11);
	        var profile = layedit.getContent(editIndex)
	        $.ajax({
	            async: false,
	            url: '../admin/blogger/save',
	            data: {
	                //thymeleaf获取request参数id值
	               // 'userName': userName,
	                'nickName': nickName,
	                'imageName': imageName,
	                'sign': sign,
	                'profile': profile,
	            },
	            type: 'post',
	            success: function(result) {
	           		if(typeof result === 'string') {
							 result = JSON.parse(result)
						}
	                if (result.success) {
	                    layer.alert('修改成功！', {
	                        title: '系统提示',
	                        icon: 6,
	                        closeBtn: 0,
	                    },
	                    function(index) {
	                        layer.close(index); //关闭并回到管理页面
	                        location.reload() //重写加载表格
	                        //window.location.href = '/views/modifyBloggerInfo'
	                    });
	                } else {
	                    layer.alert('修改失败。。', {
	                        title: '系统提示',
	                        icon: 5,
	                        closeBtn: 0,
	                    },
	                    function(index) {
	                        layer.close(index); //关闭 重新回调修改页面
	                        location.reload() //重写加载表格
	                        //window.location.href = '/views/modifyBloggerInfo'
	
	                    }); //end layer.alert
	                } //end else
	            } //end success
	        }); //end ajax
	        return false;
	    }); //end form on 
	        //清空富文本编辑器  
   var $ = layui.$,
active = {
       /* 搜索框 */
       del: function() {
           	$('#LAY_layedit_1').contents().find('body').html('');
           	return false;
           },
       };
       
   $('.del .layui-btn').on('click',
    function() {
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
    });
	});	
</script>
</body>
</html>